﻿<UserControl x:Class="P2.Cuberry.Modules.Framework.WPFCharting.ColumnsWithColor"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.Resources>
            <!-- ColorByPreferenceColumn Style -->
            <Style
                x:Key="ColorByPreferenceColumn"
                TargetType="charting:ColumnDataPoint">
                <Setter Property="Background" Value="DarkGray"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate
                            TargetType="charting:ColumnDataPoint">
                            <Border
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid Background="{Binding FavoriteColor}">
                                    <Rectangle>
                                        <Rectangle.Fill>
                                            <LinearGradientBrush>
                                                <GradientStop Color="#77ffffff" Offset="0"/>
                                                <GradientStop Color="#00ffffff" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Border BorderBrush="#ccffffff" BorderThickness="1">
                                        <Border BorderBrush="#77ffffff" BorderThickness="1"/>
                                    </Border>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <!-- ColorByGradeColumn Style-->
            <Style
                x:Key="ColorByGradeColumn"
                TargetType="charting:ColumnDataPoint">
                <Setter Property="Background" Value="DarkGray"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate
                            TargetType="charting:ColumnDataPoint">
                            <Border
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid Background="{Binding GradeColor}">
                                    <Rectangle>
                                        <Rectangle.Fill>
                                            <LinearGradientBrush>
                                                <GradientStop Color="#77ffffff" Offset="0"/>
                                                <GradientStop Color="#00ffffff" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Border BorderBrush="#ccffffff" BorderThickness="1">
                                        <Border BorderBrush="#77ffffff" BorderThickness="1"/>
                                    </Border>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

            <!-- ColorByPreferencePie StylePalette -->
            <datavis:StylePalette x:Key="ColorByPreferencePie">
                <Style TargetType="charting:PieDataPoint">
                    <Setter Property="BorderBrush" Value="Black"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="charting:PieDataPoint">
                                <Grid>
                                    <Path
                                        Data="{TemplateBinding Geometry}"
                                        Fill="{Binding FavoriteColor}"
                                        Stroke="{TemplateBinding BorderBrush}"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </datavis:StylePalette>
            <!-- ColorByPreferenceLegendItem Style -->
            <Style
                x:Key="ColorByPreferenceLegendItem"
                TargetType="charting:LegendItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="charting:LegendItem">
                            <StackPanel Orientation="Horizontal">
                                <Rectangle
                                    Width="8" Height="8"
                                    Fill="{Binding DataContext.FavoriteColor}"
                                    Stroke="{Binding BorderBrush}"
                                    StrokeThickness="1" Margin="0,0,3,0"/>
                                <datavis:Title Content="{TemplateBinding Content}"/>
                            </StackPanel>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>

        <!-- FavoriteColorColumnChart -->
        <charting:Chart
            x:Name="FavoriteColorColumnChart"
            Title="Grades - By Favorite Color"
            Grid.Column="0">
            <charting:ColumnSeries
                DependentValueBinding="{Binding Grade}"
                IndependentValueBinding="{Binding Name}"
                DataPointStyle="{StaticResource ColorByPreferenceColumn}">
                <charting:ColumnSeries.DependentRangeAxis>
                    <charting:LinearAxis
                        Orientation="Y"
                        Minimum="0"
                        Maximum="100"
                        Title="Grade"
                        ShowGridLines="True"/>
                </charting:ColumnSeries.DependentRangeAxis>
            </charting:ColumnSeries>
        </charting:Chart>

        <!-- FavoriteColorPieChart -->
        <charting:Chart
            x:Name="FavoriteColorPieChart"
            Title="Grades - By Favorite Color"
            Grid.Column="1">
            <charting:PieSeries
                DependentValueBinding="{Binding Grade}"
                IndependentValueBinding="{Binding Name}"
                StylePalette="{StaticResource ColorByPreferencePie}"
                LegendItemStyle="{StaticResource ColorByPreferenceLegendItem}"/>
        </charting:Chart>

        <!-- GradeColorColumnChart -->
        <charting:Chart
            x:Name="GradeColorColumnChart"
            Title="Grades - By Grade"
            Grid.Column="2">
            <charting:ColumnSeries
                DependentValueBinding="{Binding Student.Grade}"
                IndependentValueBinding="{Binding Student.Name}"
                DataPointStyle="{StaticResource ColorByGradeColumn}"
                TransitionDuration="0">
                <charting:ColumnSeries.DependentRangeAxis>
                    <charting:LinearAxis
                        Orientation="Y"
                        Minimum="0"
                        Maximum="100"
                        Title="Grade"
                        ShowGridLines="True"/>
                </charting:ColumnSeries.DependentRangeAxis>
            </charting:ColumnSeries>
        </charting:Chart>

        <!-- Randomization Button -->
        <Button
            Content="Randomize Grades"
            Click="RandomizeGradesClick"
            Grid.ColumnSpan="3"
            Grid.Row="1"/>
    </Grid>
</UserControl>
